<template>
  <div class="summary-page page">
    <top class="top" @generate="generate"></top>
    <middle class="middle" ref="middle" :data="data" ></middle>
    <bottom class="bottom"
      :data="data"
      :summary="summary"
      :client-id="clientId"
      :delivery-ids="deliveryIds">
    </bottom>
  </div>
</template>

<script>
import Top from './layout/Top';
import Middle from './layout/Middle';
import Bottom from './layout/Bottom';

import {
  generateSummaryReq
} from '@/requests/summaryRequests';
import {
  getNameById
} from '@/utils/commonFunc';

export default {
  name: "SummaryPage",
  props: {

  },
  data() {
    return {
      data: [],
      clientId: '',
      summary: (() => { return new Object() })(),
      deliveryIds: []
    };
  },
  computed: {
  },
  mounted() {

  },
  watch: {

  },
  methods: {
    generate(data) {
      const loaded = this.$message.loading('正在加载月结单', 0);
      const clientId = data.clientId;
      this.clientId = data.clientId;
      generateSummaryReq(data).then((res) => {
        loaded();
        const orders = res.data;
        this.data = orders;
        this.deliveryIds = ([...new Set(orders.map((value) => value.deliveryId))]);
        this.$notification['success']({
          message: '月结单',
          description:
            `获取月结单成功`,
        });
        setTimeout(() => {
          this.summary = Object.assign(this.$refs.middle.summary, {client: `${getNameById(this.$store.state.clientsCache, clientId)}(${clientId})`});
        }, 100);
      }).catch((err) => {
        loaded();
        this.$notification['error']({
          message: '月结单',
          description:
            `获取月结单失败，错误提示 ${err.response.data.message}`,
        });
      })
    }
  },
  components: {
    Top,
    Middle,
    Bottom,
  },
};
</script>

<style scoped lang="scss">
.summary-page {
  padding: 40px;
  >* {
    padding-top: 40px;
  }
}
</style>
